<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>
<style>

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>

<body>
<div class="outest" style="margin:0 auto; width: 90%; height:840px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><a href="/clothes_index_page">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">用户管理</template>
                        <el-menu-item index="2-1"><a href="/user_list_page">所有用户</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">服装管理</template>
                        <el-menu-item index="3-1"><a href="/clothes_list_page">所有服装</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">仓库管理</template>
                        <el-menu-item v-for="item, index in authinstocks" :index="item.id">
                            {{item.name}}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right">
                        <template slot="title"><el-avatar :src="imgUrl"></el-avatar>&nbsp;我</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">退出</el-menu-item>
                    </el-submenu>
                    <div style="clear: both"></div>
                </el-menu>
            </el-header>

            <el-main>
                <el-carousel :interval="10000" type="card" height="650px">
                    <el-carousel-item v-for="item in imageBox" :key="item.id">
                        <img :src="item.path" class="image" style=" height:650px; width: 100%">
                    </el-carousel-item>
                </el-carousel>
            </el-main>

            <el-footer>
                <i class="el-icon-warning-outline"></i>&nbsp;<span style="font-size: 13px; font-color:#606266;">版权所有</span> &nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            activeIndex: '1',
            imageBox:[
                {id:1, path:"images/1.jpg"},
                {id:2, path:"images/2.jpg"},
                {id:3, path:"images/3.jpg"},
                {id:4, path:"images/4.jpg"}
            ],
            imgUrl:'',
            account:'',
            authinstocks:[],
            name:'',
            id:''
        },
        mounted: function () {
            this.getuser();
        },
        methods:{
            handleSelect: function(key, keyPath) {
                console.log("key:" + key);
                console.log("keyPath:" + JSON.stringify(keyPath))
                if(keyPath[0]==4){
                    window.location.href = "instock_list_page?depotid=" + key;
                }
                if(key=="5-1"){
                    var url = "user_center_page?id=" + this.id;
                    window.location.href = url;
                }
                if(key=="5-2"){
                    this.logout();
                }
                this.activeIndex = key;
            },
            logout: function () {
                var obj = this;
                var url = "login/out";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '登出成功!'
                        });
                        vue.jump("login_page");
                    }else {
                        console.log("登出失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            getuser: function(){
                var obj = this;
                var url = "login/getuser";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        var id = res.data.id;
                        var time = new Date().getTime();
                        vue.id = res.data.id;
                        vue.account = res.data.account;
                        vue.name = res.data.name;
                        vue.imgUrl = "images/user/" + id + ".jpg?timestamp=" + time;
                        console.log("this.imgUrl:" + vue.imgUrl);
                        vue.getauthinstock(vue.account);
                        obj.$message({
                            type: 'success',
                            message: '欢迎 <' + vue.name + '> 使用服装管理系统 ^_^'
                        });
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            getauthinstock: function(account){
                console.log("account:" + account);
                var obj = this;
                var url = "login/getauthorInstock/" + account;
                console.log("url:" + url)
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.authinstocks = res.data;
                        console.log("vue.authinstocks:" + vue.authinstocks);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            },
        }
    })
</script>
</body>
</html>